<template>
  <div class="margin border_blue">
    <div slot="header" class="clearfix text-left color_blue padding-sm">
      <span class="margin-right-xl">海外仓阿米巴费用设计</span>
      <el-button size="mini" type="primary" @click="exportInfo()"
        >导出所有阿米巴费用配置信息</el-button
      >
      <el-button size="mini" type="primary" @click="bacthUpload()"
        >批量上传</el-button
      >
      <span class="margin-left-xl">价格可以在线编辑</span>
    </div>

    <div class="panel-body">
      <table class="table-data">
        <tr>
          <th width="200px">费用名称</th>
          <th width="150px">对外指导卖价单价</th>
          <th width="150px">对内交易单价</th>
          <th width="150px">国家</th>
          <th>数量</th>
        </tr>
        <template v-for="item in tableData">
          <tr
            v-for="(details, index) in item.abroadAmoebaCostDetails"
            :key="details.id"
          >
            <td
              class="center_middle"
              v-if="index === 0"
              :rowSpan="item.abroadAmoebaCostDetails.length"
            >
              {{ configPayNameMap[item.costId] }}
            </td>
            <td :name="details.id">
              {{ details.externalPrice }}
            </td>
            <td :name="details.id">
              {{ details.outPrice }}
            </td>
            <td>
              <span v-if="details.type === 0">{{
                countryMap[details.countryId]
              }}</span>
              <span v-if="details.type === 1">{{
                provinceMap[details.countryId]
              }}</span>
            </td>

            <td>{{ abroadAmoebaCostRuleMap[details.calRule] }}</td>
          </tr>
        </template>
      </table>
    </div>

    <el-dialog
      title="批量上传"
      :visible.sync="updateDialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-card>
        <el-link @click="exportFormat()">下载模板</el-link>
      </el-card>
      <el-card>
        <el-upload
          class="upload-demo"
          drag
          action="batchUploadAbroadAmoebaCost"
          :http-request="uploadFn"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            先下载模板，根据模板填入数据再上传
          </div>
        </el-upload>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import { untransform } from "@/store/yg/common/uri";
export default {
  data() {
    return {
      tableData: [],
      countryMap: {},
      provinceMap: {},
      abroadAmoebaCostRuleMap: {},
      configPayNameMap: {},
      updateDialogVisible: false,
      spanArr: [], //在data里面定义
      position: 0 //在data里面定义
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    queryList() {
      ajax("manageAbroadAmoebaCost", {})
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            var data = res.data;
            if (data.countryMap) {
              this.countryMap = data.countryMap;
            }
            if (data.provinceMap) {
              this.provinceMap = data.provinceMap;
            }
            if (data.abroadAmoebaCostRuleMap) {
              this.abroadAmoebaCostRuleMap = data.abroadAmoebaCostRuleMap;
            }
            if (data.configPayNameMap) {
              this.configPayNameMap = data.configPayNameMap;
            }
            if (data.abroadAmoebaCosts) {
              this.tableData = data.abroadAmoebaCosts;
            }

            // var option = {
            //   id:1,
            //   costId:10,
            //   cuser:1,
            //   cdate:'2020-10-10:02:10:19',
            //   sorted:1,
            //   abroadAmoebaCostDetails:[
            //     {
            //       id:1,
            //       abroadAmoebaCostId:1,
            //       externalPrice:12.3,
            //       outPrice:33.34,
            //       countryId:329,
            //       type:0,
            //       calRule:1,
            //       sorted:2,
            //     },
            //     {
            //       id:2,
            //       abroadAmoebaCostId:1,
            //       externalPrice:12.3,
            //       outPrice:33.34,
            //       countryId:329,
            //       type:0,
            //       calRule:1,
            //       sorted:2,
            //     },
            //     {
            //       id:3,
            //       abroadAmoebaCostId:1,
            //       externalPrice:12.3,
            //       outPrice:33.34,
            //       countryId:1,
            //       type:1,
            //       calRule:1,
            //       sorted:2,
            //     },
            //     {
            //       id:4,
            //       abroadAmoebaCostId:1,
            //       externalPrice:12.3,
            //       outPrice:33.34,
            //       countryId:1,
            //       type:1,
            //       calRule:1,
            //       sorted:2,
            //     }

            //   ]
            // }

            // for (let index = 0; index < 5; index++) {
            //   this.tableData.push(option)
            // }
            // console.log(this.tableData);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row, //行
          colspan: _col //列
        };
      }
    },
    delData(id) {
      ajax("delete", { id: id }).then(res => {
        if (res.code == 200) {
          this.$notify.success({
            title: "正常",
            message: "删除成功"
          });
          this.queryList();
        } else {
          this.$notify.error({
            title: "错误",
            message: "删除失败"
          });
        }
      });
    },
    checkData(id) {
      window.open(
        "/#" +
          "/blank" +
          "/amoeba__amoebaBulkyHeavyCargo__main?customerChannelId=" +
          id
      );
    },
    exportInfo() {
      ajax("exportAbroadAmoebaCost", {})
        .then(res => {
          // console.log("res",res)
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              this.$notify.error({
                title: "错误",
                message: "导出失败"
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: res.errorMesage
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    bacthUpload() {
      this.updateDialogVisible = true;
    },
    handleClose() {
      this.updateDialogVisible = false;
    },
    exportFormat() {
      ajax("exportUploadFormat", {})
        .then(res => {
          //console.log("res",res)
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              this.$notify.error({
                title: "错误",
                message: "导出失败"
              });
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    uploadFn(params) {
      //自定义上传文件

      const file = params.file;
      //fileType = file.type,
      //isImage = fileType.indexOf("pdf") !== -1,
      //isLt4M = file.size / 1024 / 1024 < 4;
      // 这里常规检验，看项目需求而定
      // if (!isImage) {
      //  this.$message.error("只能上传pdf格式!");
      //  return;
      // }

      //if (!isLt4M) {
      //   this.$message.error("只能上传图片大小小于4M");
      //   return;
      //  }
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("items[]", file);
      axios({
        method: "post",
        url:
          constant.API_SERVER +
          "/api/consume/upload?uri=" +
          untransform(this.$route.params.uri) +
          "&f=batchUploadAbroadAmoebaCost&type=blank",
        data: form
      })
        .then(response => {
          console.log(response);
          if (response.data.code === 200) {
            //this.feeData.push({mes:response.data.data.fileName,fee:response.data.data.fullFileName});
            this.$notify.success({
              title: "正确",
              message: "上传成功!"
            });
            this.handleClose();
            this.queryList();
          } else {
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + response.data.message
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
<style scoped>
.border {
  border: 1px solid #d6e9c6;
  border-radius: 5px;
}
.border_blue {
  border: 1px solid #bce8f1;
  border-radius: 5px;
}
.color {
  background-color: #dff0d8;
  color: #3c763d;
  background-image: linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%);
}
.color_blue {
  background-color: #d9edf7;
  color: #31708f;
  background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
}
.el-select {
  width: 100%;
}
.panel-body {
  padding: 20px;
}
.table-data {
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.table-data td,
th {
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  height: 22px;
}
</style>
